import { t } from 'i18next'
import { Button, Input, RangePicker } from '@kedacom/react-next'
import MeetingHeader from '@/components/MeetingHeader'
import { SearchIcon, StyledContainer, StyledWrap } from './style'
import Table from '@/components/Table'
import useInit from '@/hooks/useInit'
import useTemplateService from './service'
import WebRecommendBrowser from '@/components/WebRecommendBrowser'
import ScheduleTab from '@/components/ScheduleTab'
import dayjs from '@/plugins/dayjs'
import { useGlobalStore } from '@/store/global'
import shallow from 'zustand/shallow'
const App = () => {
	useInit()
	const {
		name,
		setName,
		start_time,
		setStartTime,
		end_time,
		setEndTime,
		columns,
		data,
		pager,
		selectedRowIds,
		setSelectedRowIds,
		handlePageChange,
		handleDelete,
		isSearch,
		emptyFilter,
		minDate,
		maxDate,
		handleSearch,
	} = useTemplateService()
	const emptyMsg = <div className="empty-msg">{t('暂无历史会议')}</div>
	const { user } = useGlobalStore(
		(state) => ({
			user: state.user,
		}),
		shallow
	)
	return (
		<>
			<WebRecommendBrowser />
			<MeetingHeader tabIndex={1} />
			<ScheduleTab tabIndex={3} />
			<StyledWrap className="template">
				{!user?.enable_meeting && <div className="no_meeting">{t('无会议管理权限，请通知管理员')}</div>}
				{!!user?.enable_meeting && (
					<>
						<StyledContainer>
							<div className="operate-bar">
								<div className="search-bar">
									<Input
										className="name-input"
										width={150}
										maxLength={32}
										placeholder={t('请输入会议名称搜索')}
										value={name}
										onChange={(e, val) => setName(val || '')}
									/>
									<RangePicker
										className="date"
										value={[start_time, end_time]}
										minDate={minDate}
										maxDate={maxDate}
										i18n={{
											confirm: t('确认'),
											year: t('年'),
											month: [
												t('一月'),
												t('二月'),
												t('三月'),
												t('四月'),
												t('五月'),
												t('六月'),
												t('七月'),
												t('八月'),
												t('九月'),
												t('十月'),
												t('十一月'),
												t('十二月'),
											],
											week: [t('日'), t('一'), t('二'), t('三'), t('四'), t('五'), t('六')],
										}}
										onChange={(e, arr) => {
											let _start_time = arr[0] ?? '' /**组件开始时间 */
											let _end_time = arr[1] ?? '' /**组件结束时间 */
											let __start_time =
												dayjs(start_time).format('YYYY-MM-DD') /**未改变前开始时间 */
											let __end_time = dayjs(end_time).format('YYYY-MM-DD') /**未改变前结束时间 */
											_start_time !== __start_time && setStartTime(dayjs(_start_time))
											_end_time !== __end_time && setEndTime(dayjs(_end_time))
										}}
									/>
									<SearchIcon className="search-btn" onClick={handleSearch} />
									{isSearch && (
										<span className="total-msg">
											{t('相关搜索结果{{total}}个', { total: pager.total })}
											<span className="reset" onClick={emptyFilter}>
												{t('清空筛选')}
											</span>
										</span>
									)}
								</div>
								<Button onClick={handleDelete}>{t('删除')}</Button>
							</div>
						</StyledContainer>
						<Table
							rowIdField="meeting_id"
							columns={columns}
							tableDataList={data}
							pager={pager}
							nodata={emptyMsg}
							selectedRowIds={selectedRowIds}
							onPageChange={handlePageChange}
							onRowSelectAll={(e, selectedRowData, selectedRowIds: string[]) => {
								setSelectedRowIds([...selectedRowIds])
							}}
							onRowClick={(e, rowData, id: string, nextSelected) => {
								if (nextSelected) {
									setSelectedRowIds([...selectedRowIds, id])
								} else {
									setSelectedRowIds(selectedRowIds.filter((item) => item !== id))
								}
							}}
							i18n={{ order: t('序号') }}
						/>
					</>
				)}
			</StyledWrap>
		</>
	)
}
export default App
